<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标事件</title>
    <link rel="stylesheet" type="text/css" href="../../../css/common.css"/>
    <!--<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>-->

</head>
<body>
<div class="page">

    <div class="content">

        <ul>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
            <li>item6</li>
        </ul>

        // attachEvent——兼容：IE7、IE8；不兼容firefox、chrome、IE9、IE10、IE11、safari、opera
        // addEventListener——兼容：firefox、chrome、IE、safari、opera；不兼容IE7、IE8
    </div>

</div>
<script>
    //ie9开始支持
    document.getElementsByTagName("ul")[0].addEventListener("mouseover", function (e) {
        $(e.target).css("background-color","#ddd").siblings().css("background-color","white");
        console.log(e.target.innerHTML)
    }, true);





</script>
</body>
</html>